<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务管理系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; color: #333; background: #f8f9fa; }
        header { background-color: #007BFF; color: white; padding: 0 40px; height: 60px; display: flex; align-items: center; }
        .logo { font-size: 1.3em; font-weight: bold; margin-right: 40px; }
        nav { display: flex; align-items: center; width: 100%; }
        .nav-left { flex: 1; display: flex; align-items: center; }
        .nav-center { flex: 2; display: flex; justify-content: center; }
        .nav-center a { color: white; text-decoration: none; margin: 0 18px; font-size: 1.1em; transition: text-decoration 0.2s; }
        .nav-center a:hover { text-decoration: underline; }
        .nav-right { flex: 1; text-align: right; font-size: 1em; }
        main { padding: 40px 20px 20px 20px; }
        .welcome { background-color: #f0f0f0; padding: 40px 30px 30px 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 8px #e0e0e0; }
        .welcome h1 { font-size: 2.3em; margin-bottom: 18px; color: #007BFF; }
        .welcome p { line-height: 1.7; font-size: 1.1em; }
        .functions { display: flex; justify-content: space-between; gap: 24px; }
        .function { width: 33%; background: white; border: 1px solid #e0e0e0; padding: 28px 18px 22px 18px; border-radius: 8px; box-shadow: 0 2px 8px #f0f0f0; display: flex; flex-direction: column; align-items: center; }
        .function h3 { margin-bottom: 12px; color: #007BFF; font-size: 1.25em; }
        .function p { line-height: 1.6; margin-bottom: 22px; text-align: center; }
        .function button { background-color: #007BFF; color: white; border: none; padding: 10px 32px; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background 0.2s; }
        .function button:hover { background-color: #0056b3; }
        @media (max-width: 900px) {
            .functions { flex-direction: column; gap: 18px; }
            .function { width: 100%; }
        }
    </style>
</head>
<body>
    <header>
        <nav style="width:100%;display:flex;align-items:center;">
            <div class="nav-left"><span class="logo">教务管理系统</span></div>
            <div class="nav-center" id="navLinks">
                <a href="index.html">首页</a>
                <a href="student.html" class="admin-teacher-link">学生管理</a>
                <a href="attendance.html" class="admin-teacher-link">考勤管理</a>
                <a href="user.html" class="admin-only-link">用户管理</a>
            </div>
            <div class="nav-right">
                <span id="userName" style="cursor:pointer;position:relative;">admin
                    <span id="logoutMenu" style="display:none;position:absolute;right:0;top:28px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #e0e0e0;padding:0 0;z-index:10;min-width:120px;">
                        <a href="userinfo.html" style="color:#007BFF;text-decoration:none;display:block;padding:8px 18px;text-align:center;" onclick="closeMenu()">个人信息</a>
                        <a href="login.html" style="color:#007BFF;text-decoration:none;display:block;padding:8px 18px;text-align:center;border-top:1px solid #eee;" onclick="logout()">退出登录</a>
                    </span>
                </span>
            </div>
        </nav>
    </header>
    <main>
        <section class="welcome">
            <h1>欢迎使用教务管理系统</h1>
            <p>本系统具备学生信息管理、考勤信息管理、系统用户管理功能。</p>
            <hr style="margin:18px 0;">
            <p>请通过上方导航栏访问各个功能模块。</p>
        </section>
        <section class="functions" id="functionCards">
            <div class="function admin-teacher-card">
                <h3>学生管理</h3>
                <p>管理学生学号、姓名、班级等基本信息。</p>
                <button onclick="location.href='student.html'">进入</button>
            </div>
            <div class="function admin-teacher-card">
                <h3>考勤管理</h3>
                <p>管理学生出勤、缺勤、请假等考勤记录。</p>
                <button onclick="location.href='attendance.html'">进入</button>
            </div>
            <div class="function admin-only-card">
                <h3>用户管理</h3>
                <p>管理系统用户信息和权限设置。</p>
                <button onclick="location.href='user.html'">进入</button>
            </div>
            <div class="function student-only-card" style="display:none;">
                <h3>个人信息</h3>
                <p>查看个人学籍信息和考勤记录。</p>
                <button onclick="location.href='userinfo.html'">进入</button>
            </div>
        </section>
    </main>
    <script>
        // 检查用户是否已登录
        function checkLogin() {
            var user = localStorage.getItem('loginUser');
            if (!user) {
                // 未登录，重定向到登录页面
                window.location.href = 'login.html';
                return false;
            }
            return user;
        }

        // 根据用户角色控制页面显示
        function setupUIByRole() {
            var role = localStorage.getItem('userRole') || '';
            var userName = localStorage.getItem('userName') || localStorage.getItem('loginUser');

            // 设置用户名显示
            document.getElementById('userName').firstChild.textContent = userName;

            // 控制导航栏显示
            var adminTeacherLinks = document.querySelectorAll('.admin-teacher-link');
            var adminOnlyLinks = document.querySelectorAll('.admin-only-link');

            if (role === 'admin') {
                adminTeacherLinks.forEach(link => link.style.display = 'inline');
                adminOnlyLinks.forEach(link => link.style.display = 'inline');
            } else if (role === 'teacher') {
                adminTeacherLinks.forEach(link => link.style.display = 'inline');
                adminOnlyLinks.forEach(link => link.style.display = 'none');
            } else if (role === 'student') {
                adminTeacherLinks.forEach(link => link.style.display = 'none');
                adminOnlyLinks.forEach(link => link.style.display = 'none');
            }

            // 控制功能卡片显示
            var adminTeacherCards = document.querySelectorAll('.admin-teacher-card');
            var adminOnlyCards = document.querySelectorAll('.admin-only-card');
            var studentOnlyCards = document.querySelectorAll('.student-only-card');

            if (role === 'admin') {
                // 管理员可以看到所有卡片
                adminTeacherCards.forEach(card => card.style.display = 'flex');
                adminOnlyCards.forEach(card => card.style.display = 'flex');
                studentOnlyCards.forEach(card => card.style.display = 'none');
            } else if (role === 'teacher') {
                // 老师可以看到学生管理和考勤管理
                adminTeacherCards.forEach(card => card.style.display = 'flex');
                adminOnlyCards.forEach(card => card.style.display = 'none');
                studentOnlyCards.forEach(card => card.style.display = 'none');
            } else if (role === 'student') {
                // 学生只能看到个人信息卡片
                adminTeacherCards.forEach(card => card.style.display = 'none');
                adminOnlyCards.forEach(card => card.style.display = 'none');
                studentOnlyCards.forEach(card => card.style.display = 'flex');
            }
        }

        // 动态显示用户名和控制页面显示
        document.addEventListener('DOMContentLoaded', function() {
            // 验证登录状态
            var user = checkLogin();
            if (!user) return; // 如果未登录，已重定向到登录页面

            // 根据用户角色设置UI
            setupUIByRole();
        });

        // 点击用户名显示/隐藏退出菜单
        document.getElementById('userName').onclick = function(e) {
            var menu = document.getElementById('logoutMenu');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
            e.stopPropagation();
        };

        // 点击页面其他地方隐藏菜单
        document.body.onclick = function() {
            var menu = document.getElementById('logoutMenu');
            if(menu) menu.style.display = 'none';
        };

        // 退出登录
        function logout() {
            localStorage.removeItem('loginUser');
            localStorage.removeItem('userRole');
            localStorage.removeItem('userName');
            window.location.href = 'login.html'; // 退出后重定向到登录页面
        }

        function closeMenu() {
            setTimeout(function(){
                var menu = document.getElementById('logoutMenu');
                if(menu) menu.style.display = 'none';
            }, 100);
        }
    </script>
</body>
</html>
